<template>
  <div class="home">
    <div class="home-container">
      <header class="header">
        <Header />
      </header>
    </div>
    <div class="w-full flex flex-col justify-center items-center ticketSale">
      <div class="w-[80%] flex justify-start items-center">
        <el-breadcrumb :separator-icon="ArrowRight" class="pt-6 pb-6">
          <el-breadcrumb-item :to="{ path: '/' }" class="cursor-pointer">
            <img
              src="@/assets/images/aboutTravelAi/home.png"
              alt=""
              class="inline-block mr-2 mb-1"
              width="15"
              height="15"
            />
            <span>{{ $t("aboutTravelAi.home") }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{
            $t("ticketSales.ticketSales")
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span class="text-[#0572c0]">{{
              $t("ticketSales.aboutTicketSales")
            }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="w-[80%] flex-1">
        <Sale />
      </div>
    </div>
    <div class="w-[100%] bg-[#f3f6fd]">
      <Excellence />
    </div>
    <footer>
      <Footer />
    </footer>
  </div>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import Header from "@/components/header.vue";
import Sale from "./components/sale.vue";
import Excellence from "./components/excellence.vue";
import Footer from "@/components/footer.vue";
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  // background: #f5f5f5;
  .home-container {
    width: 100%;
    height: 700px;
    background: url("@/assets/images/TicketSales/bg.png") no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    .tips {
      position: absolute;
      left: 28%;
      top: 45%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #fff;
      padding: 20px 10px;
      width: 370px;
      background: #013578;
      color: #fff;
    }
    .search {
      position: absolute;
      left: 28%;
      top: 75%;
      transform: translate(-50%, -50%);
      width: 370px;
    }
  }
  .header {
    height: 80px;
  }
  .ticketSale {
    min-height: 650px;
    background: url("@/assets/images/TicketSales/1.png") no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
</style>
